<template>
  <svg :class="icon" :style="styles" aria-hidden="true">
    <use v-bind="{'xlink:href':'#'+name}"></use>
  </svg>
</template>

<script>
  export default {
    name: 'hd-svg-icon',
    data () {
      return {
      }
    },
    props: {
      name: {
        type: String,
        required: true,
        default: 'hd-jifen'
      },
      color: {
        validator(value) {
          if (!value) return true;
          return isColor(value);
        }
      },
      size: {
        validator(value) {
          return /^(\.|\d+\.)?\d+(px|rem)$/.test(value)
        },
        default: '.2rem'
      }
    },
    computed: {
      styles() {
        const style = {}
        if (this.size) {
          style.fontSize = this.size;
        }
        if (this.color) {
          style.fill = this.color;
        }
        return style
      },
      icon() {
        return 'icon'
      }
    }
  }

  const isColor = function (value) {
    const colorReg = /^#([a-fA-F0-9]){3}(([a-fA-F0-9]){3})?$/
    const rgbaReg = /^[rR][gG][bB][aA]\(\s*((25[0-5]|2[0-4]\d|1?\d{1,2})\s*,\s*){3}\s*(\.|\d+\.)?\d+\s*\)$/
    const rgbReg = /^[rR][gG][bB]\(\s*((25[0-5]|2[0-4]\d|1?\d{1,2})\s*,\s*){2}(25[0-5]|2[0-4]\d|1?\d{1,2})\s*\)$/
    return colorReg.test(value) || rgbaReg.test(value) || rgbReg.test(value)
  }
</script>

<style>

</style>
